<template>
	<div>
		<div class="title-box">
			<div class="title">{{ title }}</div>
			<div>
				<slot />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ""
			}
		}
	};
</script>

<style lang="less" scoped>
	.title-box {
		padding: 12px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 14px;
			font-weight: bold;
			color: #3a3d4b;
			position: relative;

			&::after {
				content: "";
				width: 5px;
				height: 19px;
				background: linear-gradient(48deg, #ff6437, #ffbba2 100%);
				border-radius: 0 4px 4px 0px;
				position: absolute;
				left: -20px;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
</style>
